<template>
    <div class="setComponent">
        <div class="form-item">
            <label>导航标题和链接</label>
            <el-button size="mini" @click="titleClick('title')">编辑</el-button>
        </div>
        <div class="form-item">
            <label>添加导航</label>
            <el-button type="primary" round size="mini" @click="addClick">添加</el-button>
        </div>
        <div class="form-item">
            <label>删除导航</label>
            <el-button :disabled="obj.imgTextBox.length==0" type="danger" round size="mini" @click="removeClick">删除</el-button>
        </div>
        <div class="form-item">
            <label>LOGO图</label>
            <el-button size="small" type="primary" @click="imgloadClick">上传图片</el-button>
        </div>
        <div class="form-item">
            <label>菜单的背景色</label>
            <el-color-picker v-model="obj.backgroundColor"/>
        </div>
        <div class="form-item">
            <label>菜单的文字颜色</label>
            <el-color-picker v-model="obj.textColor"/>
        </div>
        <div class="form-item">
            <label>激活菜单的文字颜色</label>
            <el-color-picker v-model="obj.activeColor"/>
        </div>
        <div class="form-item">
            <label>导航菜单距离左侧的距离</label>
            <el-input-number v-model="obj.paddingMenuLeft"/>
        </div>
    </div>
</template>
<script>
export default {
    name: 'SetRow',
    props: {
        obj: {
            type: Object

        }
    },
    methods: {
        butClick(msg) {
            this.$emit('butClick', msg)
        },
        imgloadClick() {
            this.$emit('imgloadClick', this.obj)
        },
        addClick() {
            this.obj.imgTextBox.push(JSON.parse(JSON.stringify(this.obj.imgTextBox[0])))
        },
        removeClick() {
            this.obj.imgTextBox.pop()
        },
        titleClick(type) {
            this.$emit('titleClick', [this.obj, type])
        }
    }
}
</script>
<style lang="scss" scoped>

</style>

